<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>申报者管理</title>
@include('common-css')
<style>
.input_box {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input_label {
    width: 120px;
    box-sizing: border-box;
}

.application-list {
    position: relative;
    margin-top: 20px;
}

.phase-tag {
    color: #1890ff;
    border: 1px solid #91d5ff;
    border-radius: 3px;
    background: #e6f7ff;
    font-size: 12px;
    padding: 2px 3px;
}

.ant-table-tbody > tr > td, .ant-table-thead > tr > th {
    vertical-align: middle;
    line-height: 25px;
}

.action-table .ant-select {
    width: 120px;
}

.action-table .search-td {
    display: flex;
    justify-content: flex-start;
}

.action-table .ant-input {
    width: 178px;
}

.action-table .search-td .ant-btn {
    margin-left: 16px;
}

.my-pagination {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.common_box {
    position: relative;
}

.search-box {
    position: absolute;
    right: 30px;
    top: 58px;
}

.search-box .ant-input {
    width: 300px;
}

.confirm-save-a {
    color: #52c41a;
}

.confirm-save-a:hover {
    color: #52c41a;
}

.cancel-save-a {
    color: #faad14;
}

.cancel-save-a:hover {
    color: #faad14;
}

.delete-btn-a {
    color: #f5222d
}

.login_input_container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
}

.input_box {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input_label {
    width: 120px;
    box-sizing: border-box;
}

.add-user-div {
    margin-bottom: 16px;
}

.ant-input-suffix {
    cursor: pointer;
}
</style>
</head>
<body>
<div id="app">

</div>
</body>
</html>

<script id="appTemplate" type="x-template">
<a-locale-provider :locale="antdLocale">
    <div class="container">

        @include('admin.header-tpl')

        <main>
            <div class="common_container">

                @include('admin.aside-tpl')

                <div class="common_content">
{{--                    <span style="flex: 1;"></span>--}}
{{--                    <a-input style="width: 300px;" placeholder="搜索" v-model="searchKeyword"/>--}}
{{--                    <a-icon v-if="searchKeyword"--}}
{{--                            style="position: absolute; top: 8px; right: 8px; color: #aaa; cursor: pointer;"--}}
{{--                            type="cross"--}}
{{--                            @click="searchKeyword = ''"/>--}}

                    <div class="common_box">
                        <div style="display: flex; position: relative; margin-top: 10px; align-items: center;">
                            <span style="flex: 1;"></span>

                            <a-input style="width: 300px;" placeholder="搜索IP" v-model="searchKeyword"/>
                            <a-icon v-if="searchKeyword"
                                    style="position: absolute; top: 8px; right: 8px; color: #aaa; cursor: pointer;"
                                    type="cross"
                                    @click="searchKeyword = ''"/>
                        </div>
                        <a-table class="application-list"
                                 rowKey="id"
                                 :columns="loginErrorListColumns"
                                 :dataSource="searchFilterList"
                                 :pagination="false">
                            <p slot="index"
                               slot-scope="text, record, index"
                               style="margin: 0">
                                @{{index+1}}
                            </p>
                            <p slot="time"
                               slot-scope="text, record"
                               style="margin: 0">
                                创建时间：@{{record.created_at}}<br>
                                最近修改：@{{record.updated_at}}
                            </p>
                            <template slot="operations" slot-scope="text, record, index">
                                <div class='editable-row-operations'>
                                    <span>
                                        <a-popconfirm title="确认解除登陆限制"
                                                      @confirm="handleDeleteUser(record,index)"
                                                      okText="是"
                                                      cancelText="否">
                                            <a class="delete-btn-a" style="margin-left: 12px;">解封</a>
                                        </a-popconfirm>
                                    </span>
                                </div>
                            </template>
                        </a-table>
                    </div>
                </div>
            </div>
        </main>
    </div>
</a-locale-provider>
</script>

@include('common-js')

@include('admin.header-js')
@include('admin.aside-js')

<script>
var queryParams = parseUrl(location.href).params;

const loginErrorListColumns = [
    {
        width: 80,
        title: '序号',
        scopedSlots: {
            customRender: 'index'
        }
    }, {
        width: 100,
        title: 'IP地址',
        dataIndex: 'ip',
    }, {
        width: 80,
        title: '登陆错误次数',
        dataIndex: 'error_num',
    }, {
        width: 150,
        title: '操作时间',
        dataIndex: 'time',
        scopedSlots: {
            customRender: 'time'
        }
    }, {
        width: 160,
        title: '操作',
        dataIndex: 'operations',
        scopedSlots: {
            customRender: 'operations'
        }
    }];


Vue.prototype.$axios = axios;
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        isSending: false,
        addUserModelVisible: false,
        flags: {
            showOrgPhotoDialogVisible: false,
        },
        currentBizLicPhotoUrl: '',
        loginErrorListColumns,
        loginErrorList:[],

        searchKeyword:'',

        cacheData: [],
        currentPage: 1,
        pageSize: 10,
        pageData: [],
        totalCount: 0,
        filters: {
            entityTypeFilter: '',
            sortBy: '',
            keyword: ''
        },
        adminChangePasswordDialogVisible: false,
        changePasswordUserId: '',
        asideSelectedKeys: [queryParams.aside_key],
        antdLocale: antd.locales.zh_CN,
        ...AdminHeader.data,
        ...AdminAside.data,
    },
    computed: {
        searchFilterList() {
            var projects;
            if (this.searchKeyword) {
                var q = this.searchKeyword.trim();
                projects = this.loginErrorList.filter(project => {
                    var text = project.id + project.ip;
                    console.log(text)
                    return text.toLowerCase().indexOf(q) != -1
                })
            } else {
                projects = this.loginErrorList
            }
            return projects
        },
    },
    beforeMount() {
        this.loadAsideDefaultOpenKeys()
    },
    mounted() {
        this.fetchData();
        this.reloadAsideData()
    },
    methods: {
        fetchData() {
            axios.post('/api/admin/get-login-error').then(res => {
                console.log('res', res);
                this.loginErrorList = res.data.list
            })
        },
        handleDeleteUser(obj,index) {
            let _this = this
            axios.post('/api/admin/clear-login-error', {
                ip: obj.ip
            }).then(res => {
                var data = res.data;
                if (data.ok) {
                    antd.message.success(data.msg, 0);
                    _this.loginErrorList.splice(index,1)
                } else {
                    antd.message.warn(data.msg, 3)
                }
            })
        },
        ...AdminHeader.methods,
        ...AdminAside.methods,
    }
})
</script>